<template>
  <div ref="antTableRef" :id="antTableId" :style="'position:relative;' + (pagination ? 'padding-bottom: 48px' : '')">
    <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination ? pagination : false" :scroll="scroll"
      :rowSelection="rowSelection" :customRow="customRow1" :rowClassName="rowClassName1" :rowKey="rowKey">
      <template v-slot:[item]="scope" v-for="item in renderArr">
        <slot :name="item" :scope="scope" v-bind="scope || {}"></slot>
      </template>
    </a-table>
    <div class="no-data bg-w flex-center flex-column" v-if="dataSource.length === 0">
      <img src="http://oss-cdn.mkh.cn/picture/2022-4-20/gmZc5uiM3pQKGHoOxVaZ2.png" alt="">
      <p>暂无数据</p>
    </div>
  </div>
</template>
 
<script setup>
import { useSlots, defineProps, reactive, ref, onMounted } from 'vue';
//如果要知道使用插槽的实例需要引入 useSlots
import Bus from '@/utils/bus';

const props = defineProps(['dataSource', 'columns', 'rowSelection', 'isSelect', 'pagination', 'height', 'bottomDistance', 'customRow', 'rowClassName', 'rowKey']);

const slots = useSlots()

const renderArr = Object.keys(slots);
let antTableRef = ref(null);
const data = reactive({
  renderArr
})
const scroll = ref({
  x: true
});
const antTableId = "table" + new Date().getTime();

// 计算table内容区域高度
const calculateTableHeight = () => {
  const divRef = document.getElementById(antTableId);
  if (props.height > 0) {
    divRef.style.height = props.height + "px";
    scroll.value.y = props.height - 40;
    if (props.pagination) {
      scroll.value.y = props.height - 48 - 40;
    }
  } else if (divRef) {
    setTimeout(() => {
      const root = document.querySelector('#app');
      let tableHeight = null;
      tableHeight = root.clientHeight - antTableRef.value.offsetTop - 20 - 16 - 146;
      if (props.bottomDistance) {
        tableHeight -= props.bottomDistance;
      }

      divRef.style.height = tableHeight + "px";

      if (props.pagination) {
        tableHeight -= 48;
      }

      scroll.value.y = tableHeight - 40 + "px";
    }, 10);
  }
};

onMounted(() => {
  setTimeout(calculateTableHeight, 10);
  Bus.on("tableHeightChange", () => {
    calculateTableHeight();
  });
});
</script>
<style lang="less">
.no-data {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  z-index: 10;
  height: calc(100% - 40px);
  align-items: center;

  img {
    width: 144px;
    height: 132px;
  }

  p {
    color: #595959;
  }
}

.ant-table-wrapper {
  margin-bottom: 0 !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .ant-spin-nested-loading,
  .ant-spin-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .ant-pagination {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  }

  .ant-table {
    position: relative;

    height: 100%;

    &::-webkit-scrollbar {
      display: none
    }

    .ant-table-body {
      padding-bottom: 10px;

      // &::-webkit-scrollbar {
      //   height: 5px;
      //   width: 0px;
      // }
    }

    .ant-empty {
      .ant-empty-image {
        width: 144px;
        height: 132px !important;
        margin: 0 auto;
        background: url("http://oss-cdn.mkh.cn/picture/2022-4-20/gmZc5uiM3pQKGHoOxVaZ2.png") no-repeat;
        background-size: 144px 132px;

        .ant-empty-img-simple {
          display: none;
        }
      }

      .ant-empty-description {
        color: #595959;
      }
    }

    th,
    td {
      padding: 0 16px !important;
      height: 40px !important;
      white-space: nowrap;
      min-width: 100px;
      max-width: 300px;

      &.ant-table-cell-fix-right-first {
        right: 0 !important;
      }

      &.ant-table-cell-scrollbar {
        display: none;
      }
    }

    th {
      white-space: nowrap;
    }

    .ant-table-row td:last-child {
      .ant-btn:first-child {
        padding-left: 0;
      }
    }

    .ant-table-measure-row {
      overflow: hidden;

      td {
        height: 0px !important;
      }
    }

    tbody tr:last-child td {
      border-bottom: none !important;
    }
  }

  .ant-table-pagination.ant-pagination {
    margin: 16px 0 0;
  }

  .ant-table-cell::before {
    display: none;
  }
}
</style>